<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
    <title></title>
    <!-- Bootstrap Core CSS -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <script src="js/jquery.js"></script>
<script >
   
  function GetQueryString(account){
                  var reg = new RegExp("(^|&)"+ account +"=([^&]*)(&|$)");
                  var r = window.location.search.substr(1).match(reg);
                    if(r!=null)return  unescape(r[2]); return null;
  }
  function quit(){
      var r = confirm('确定注销?');
      if(r == true){
          window.location.href='http://127.0.0.1:8848/t/moban453/index.html';
      }
  }
  function borr(book_id,account){
   
      var json = {"book_id":book_id,"account":account};
      var r = confirm("确定要借阅此书籍吗？")
      if (r == true){
      $.ajax({
          type:'post',
          url:"http://127.0.0.1:8080/borrow",
         contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
         data:json,
         dataType:'json',
          
          success:function(data){   
             if(data.massage == 1){
                 alert("借书成功！");
           location.reload();
             }
             else{
                 alert("该书籍已被全部借阅，请下次再来")
             }
              }  
      }) 
      }
     
  }
  
    var account= GetQueryString("account");
    $(function(){
        $('#username33').text(account)
        $("#self").attr('href',"个人信息.html?account="+account); 
        $("#a1").attr('href',"User_book.html?account="+account);
      
         var index = 0;
               $("#nowPage").text(index+1);
        var json = {"index":index};
       
       $.ajax({
           type:'post',
           url:"http://127.0.0.1:8080/book_information",
          contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
          data:json,
          dataType:'json',
         
           success:function(data){    
    
              for(var i=0;i<data.length;i++){
                   // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+newName+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow? onclick=borrow("+data[i].id+","+account+")>借书</a></td></tr>");
                   $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow onclick=borr("+data[i].id+","+account+")>借书</a></td></tr>")
               }
               }  
       })
        
        
    
        $("#last").click(function(){
            if(index == 0){
                index = 0;
            }
            else{
                index --;
            
               var json = {"index":index};
            $.ajax({
                type:'post',
                url:"http://127.0.0.1:8080/book_information",
               contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
               data:json,
               dataType:'json',
                success:function(data){     
                          $("#nowPage").text(index+1);
                     $("#table1").empty();
                   for(var i=0;i<data.length;i++){
                        $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow onclick=borr("+data[i].id+","+account+")>借书</a></td></tr>")
                        // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=借书.html?name="+data[i].id+'&account='+account+">借书</a></td></tr>")
                    }
                    }  
            })
            }
        })
        $("#next").click(function(){
            if(index == 15){
                index = 15;
            }
            else{
                index ++;
            
               var json = {"index":index};
            $.ajax({
                type:'post',
                url:"http://127.0.0.1:8080/book_information",
               contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
               data:json,
               dataType:'json',
                success:function(data){   
                          $("#nowPage").text(index+1);
                   $("#table1").empty();
                   for(var i=0;i<data.length;i++){
                         $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow onclick=borr("+data[i].id+","+account+")>借书</a></td></tr>")
                        // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+newName+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow? onclick=borrow("+data[i].id+","+account+")>借书</a></td></tr>");
                        // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=借书.html?name="+data[i].id+'&account='+account+">借书</a></td></tr>")
                    }
                    }  
            })
            }
        })
        $("#jump").click(function(){
           var page = $("#page").val()-1;
      
           if(page<0 || page>23){
               alert("没有该页数");
           }
           else{
                  var json = {"index":page};
               $.ajax({
                   type:'post',
                   url:"http://127.0.0.1:8080/book_information",
                  contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
                  data:json,
                  dataType:'json',
                   success:function(data){   
                             $("#nowPage").text(page+1);
                      $("#table1").empty();
                      for(var i=0;i<data.length;i++){
                           // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=借书.html?name="+data[i].id+'&account='+account+">借书</a></td></tr>")
                         $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+data[i].book_name+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow onclick=borr("+data[i].id+","+account+")>借书</a></td></tr>")
                        // $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+newName+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow? onclick=borrow("+data[i].id+","+account+")>借书</a></td></tr>");
                       }
                       }  
               }) 
           }      
        })
       
        $("#find").click(function(){
            var book_name=$("#num").val();    
            var regExp = new RegExp(book_name, 'g');//创建正则表达式，g表示全局的，
            var json = {"book_name":book_name};
            $.ajax({
                type:'post',
                url:"http://127.0.0.1:8080/findByName",
               contentType: "application/x-www-form-urlencoded", //传过去的数据类型，此为表单
               data:json,
               dataType:'json',
                success:function(data){  
                          $("#nowPage").text(1);
                   $("#table1").empty();
                   for(var i=0;i<data.length;i++){
                      var newName =  data[i].book_name.replace(regExp,'<label style="color:red;font-weight:bold">'+book_name+'</label>');
                        $("#table1").append("<tr><td>"+data[i].id+"</td><td>"+newName+"</td><td>"+data[i].book_author+"</td><td>"+data[i].book_classes+"</td><td>"+data[i].book_price+"</td><td>"+data[i].book_public+"</td><td>"+data[i].book_surplus+"</td><td><a href=# id=borrow onclick=borr("+data[i].id+","+account+")>借书</a></td></tr>");
                        
                    }
                    }  
            })
            
            
            // window.location.href='find2.html?account='+account+'&book_id='+book_id;
            
        })
    })
      

</script>
</head>

<body class="fix-header card-no-border">
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar">
            <nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
                <!-- ============================================================== -->
                <!-- Logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="User_book.html">
                        <!-- Logo icon -->
                        <b>
                            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                            <!-- Dark Logo icon -->
                            <img src="assets/images/logo-icon.png" alt="User_book.html" class="dark-logo" />
                            
                        </b>
                        <!--End Logo icon -->
                        <!-- Logo text -->
                        <span>
                            <!-- dark Logo text -->
                            <img   class="dark-logo" />学生用户系统
                        </span>
                    </a>
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav mr-auto mt-md-0 ">
                        <!-- This is  -->
                        <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                        <li class="nav-item hidden-sm-down">
                            <form class="app-search p-l-20">
                             
                                <input type="text" id="num" class="form-control" placeholder="按书名关键字查找图书..."> <div class="col-md-6 col-4 align-self-center">
                            </form>

                        </li>
                        <!-- 查找图书 -->
                        <button id="find" value="查找"  class="btn pull-right hidden-sm-down btn-success">查找
                      
                    </ul>
                  <h1 style="margin: auto;">广西科技大学图书管理系统</h2>
                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item dropdown">
                            <!-- 管理员名字 -->
                            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/users/1.jpg" alt="user" class="profile-pic m-r-5" /><label id="username33" ></label></a><a href="#" onclick="quit()">注销</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li>
                            <a id="a1" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>图书信息</a>
                        </li>
                        <li>
                            <a id="self"  class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>个人信息</a>
                        </li>
                       
                        
                        
                       
                       
                    </ul>
                   
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <div class="page-wrapper">
            <div class="container-fluid">
                <div class="row page-titles">
                    <div class="col-md-6 col-8 align-self-center">
                        <h3 class="text-themecolor m-b-0 m-t-0">书籍浏览</h3>
                        
                    </div>
                   
                </div>
                <div class="row">
                    <!-- column -->
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <h4 class="card-title">图书资料</h4>
                        
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>书号</th>
                                                <th>书名</th>
                                                <th>作者</th>
                                                <th>类别</th>
                                                <th>价格</th>
                                                <th>出版社</th>
                                                <th>库存量</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="table1">

                                        </tbody>
                                    </table>
                                   
                                </div>
                                
                            </div>
                            <div style="margin: auto;">
                               <label ><a href="#" id="last"> < 上一页</a></label>
                              当前页数<label style="color: #0000FF;" id="nowPage"></label>
                               <label ><a href="#" id = "next">下一页 ></a></label> 
                                <label><button id="jump">跳到</button> <input id="page" type="text" style="width: 30px;"/>页</label>
                                <label>&nbsp;一共23页</label>
                            </div>
                             
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="assets/plugins/bootstrap/js/tether.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="js/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="js/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->
    <script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
</body>

</html>
